<template>
  <div class="component-box">
    <el-dialog
      :title="showTitle"
      :visible.sync="showModel"
      width="50%"
      @close="handleClose"
    >
      <el-form
        :disabled="isDisabled"
        :model="formData"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        :inline="true"
      >
        <!-- 姓名 -->
        <el-form-item label="姓名" prop="name">
          <el-input v-model="formData.name" placeholder="请输入姓名" />
        </el-form-item>

        <!-- 性别 -->
        <el-form-item label="性别" prop="sex">
          <el-select v-model="formData.sex" placeholder="请选择性别">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>

        <!-- 岗位 -->
        <el-form-item label="岗位" prop="job">
          <el-select v-model="formData.job" placeholder="请选择性别">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>

        <!-- 手机号 -->
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="formData.phone" placeholder="请输入手机号" />
        </el-form-item>

        <!-- 状态 -->
        <el-form-item label="状态" prop="status">
          <el-select v-model="formData.status" placeholder="请选择状态">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>

        <!-- 健康证编号 -->
        <el-form-item label="健康证编号" prop="num">
          <el-input v-model="formData.num" placeholder="请输入健康证编号" />
        </el-form-item>

        <!-- 健康证照片 -->
        <el-form-item label="健康证照片" prop="logo">
          <ImgUpload
            v-if="formData.logo"
            ref="ImgUpload"
            :limit="1"
            v-model="formData.logo"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer" v-if="!isDisabled">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="handleSubmit()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    openModel: {
      type: Boolean,
      default: false
    },
    modelType: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      formData: {
        name: '',
        sex: '',
        // 岗位
        job: '',
        phone: '',
        status: '',
        num: '',
        logo: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: ['blur', 'change'] }
        ],
        sex: [
          { required: true, message: '请选择性别', trigger: ['blur', 'change'] }
        ],

        job: [
          { required: true, message: '请选择岗位', trigger: ['blur', 'change'] }
        ],
        phone: [
          {
            required: true,
            message: '请输入手机号',
            trigger: ['blur', 'change']
          },
          {
            pattern: /^1[3456789]\d{9}$/,
            message: '手机号格式不正确',
            trigger: ['blur', 'change']
          }
        ],
        status: [
          { required: true, message: '请选择状态', trigger: ['blur', 'change'] }
        ],
        num: [
          {
            required: true,
            message: '请输入健康证编号',
            trigger: ['blur', 'change']
          }
        ],
        logo: [
          {
            required: true,
            message: '请上传健康证照片',
            trigger: ['blur', 'change']
          }
        ]
      }
    }
  },

  computed: {
    showModel: {
      get() {
        return this.openModel
      },
      set(value) {
        this.$emit('update:openModel', value)
      }
    },
    showTitle() {
      const obj = {
        read: '查看',
        edit: '编辑',
        add: '新增'
      }
      return obj[this.modelType]
    },
    isDisabled() {
      // 表单在查看状态不可编辑
      if (['read'].includes(this.modelType)) {
        return true
      }
      return false
    }
  },

  watch: {
    showModel: {
      handler(value) {
        if (value) {
          // 模拟请求
          setTimeout(() => {
            this.formData.logo =
              'http://62.234.213.81:8888/group1/M00/00/01/CgAIDWX5RGmAK4tBAAI0AMjjQYk956.jpg'
          }, 800)
        }
      }
    }
  },

  methods: {
    handleClose() {
      this.showModel = false
      this.$refs.ruleForm.resetFields()
      this.$refs.ImgUpload.fileList = []
    },
    handleSubmit() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped></style>
